<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表页</title>
  <link rel="shortcut icon" href="./favicon.ico" />
  <link rel="stylesheet" href="./CSS/common.css">
  <link rel="stylesheet" href="./CSS/base.css">
  <link rel="stylesheet" href="./CSS/list.css">
</head>
<body>
    <!-- 快捷导航模块 start -->
    <div class="shortcut">
      <div class="w">
        <div class="fl">
          <ul>
            <li>品优购欢迎您！&nbsp;</li>
            <li><a href="javascript:;" title="请先登录">请先登录</a>&nbsp;&nbsp;</li>
            <li><a class="font-red" href="javascript:;" title="免费注册">免费注册</a>&nbsp;</li>
          </ul>
        </div>
        <div class="fr">
          <ul>
            <li>
              <div id="fr-nav">
                <dl>
                  <dt><a href="javascript:;">我的订单</a></dt>
                  <dd><a href="javascript:;">订单1</a></dd>
                  <dd><a href="javascript:;">订单2</a></dd>
                </dl>
              </div>
            </li>
            <li></li>
            <li>
              <div id="fr-nav">
                <dl>
                  <dt><a href="javascript:;">我的品优购</a></dt>
                  <dd><a href="javascript:;">可加链接</a></dd>
                  <dd><a href="javascript:;">可加链接</a></dd>
                </dl>
              </div>
            </li>
            <li></li>
            <li>
              <div id="fr-nav">
                <dl>
                  <dt><a href="javascript:;">品优购会员</a></dt>
                  <dd><a href="javascript:;">可加链接</a></dd>
                  <dd><a href="javascript:;">可加链接</a></dd>
                </dl>
              </div>
            </li>
            <li></li>
            <li>
              <div id="fr-nav">
                <dl>
                  <dt><a href="javascript:;">企业采购</a></dt>
                  <dd><a href="javascript:;">可加链接</a></dd>
                  <dd><a href="javascript:;">可加链接</a></dd>
                </dl>
              </div>
            </li>
            <li></li>
            <li>
              <div id="fr-nav">
                <dl>
                  <dt><a href="javascript:;">关注品优购</a></dt>
                  <dd><a href="javascript:;">可加链接</a></dd>
                  <dd><a href="javascript:;">可加链接</a></dd>
                </dl>
              </div>
            </li>
            <li></li>
            <li>
              <div id="fr-nav">
                <dl>
                  <dt><a href="javascript:;">客户服务</a></dt>
                  <dd><a href="javascript:;">可加链接</a></dd>
                  <dd><a href="javascript:;">可加链接</a></dd>
                </dl>
              </div>
            </li>
            <li></li>
            <li>
              <div id="fr-nav">
                <dl>
                  <dt><a href="javascript:;">网站导航</a></dt>
                  <dd><a href="javascript:;">可加链接</a></dd>
                  <dd><a href="javascript:;">可加链接</a></dd>
                </dl>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 快捷导航模块 end -->
    
    <!-- header头部模块制作 start -->
    <header class="header w">
      <!-- logo模块 -->
      <div class="logo">
        <h1><a href="index.html" title="品优购商城"></a></h1>
      </div>
      <!-- 秒杀模块 -->
      <span class="miaosha">秒杀</span>
      <!-- 搜索模块 -->
      <div class="search">
        <form action="">
          <!-- 使用autocomplete="on"  必须添加一个name属性 -->
          <input type="search" name="search" placeholder="输入您所需要查找的商品" required="required" autocomplete="on">
          <input type="submit" value="搜索">
        </form>
    
      </div>
      <!-- hotwords模块 -->
      <div class="hotwords">
        <a href="">优惠购首发</a>
        <a href="">亿元优惠</a>
        <a href="">9.9元团购</a>
        <a href="">美满99减30</a>
        <a href="">办公用品</a>
        <a href="">电脑</a>
        <a href="">通信</a>
    
      </div>
      <!-- 购物车模块 -->
      <div class="purch">
        <button>
          <p>我的购物车</p>
        </button>
        <div class="count">
          <p>99</p>
        </div>
      </div>
    
    </header>
    <!-- header头部模块制作 end -->
    
    <!-- nav模块  start -->
    <nav class="nav">
      <div class="w">
        <div class="nav-fl">
          <ul>
            <li><a href="javascript:;">品优秒杀</a></li>
            <li><a href="javascript:;">即将售完</a></li>
            <li><a href="javascript:;">超值低价</a></li>
          </ul>
        </div>
        <div class="nav-fr">
          <ul>
            <li><a href="javascript:;">女装</a></li>
            <li><a href="javascript:;">女鞋</a></li>
            <li><a href="javascript:;">男装</a></li>
            <li><a href="javascript:;">男鞋</a></li>
            <li><a href="javascript:;">母婴童装</a></li>
            <li><a href="javascript:;">食品</a></li>
            <li><a href="javascript:;">智能数码</a></li>
            <li><a href="javascript:;">运动户外</a></li>
            <li><a href="javascript:;">更多分类</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- nav模块  end -->

    <!-- 女鞋模块 start-->
    <div class="w">
      <section class="nvxie">
        <img src="./updown/list/nvxie.jpg" alt="" srcset="">
      </section>
    </div>
    <!-- 女鞋模块 end-->

    <!-- 手机模块 start -->
    <div class="w phone">
      <ul>
        <li>
          <div class="list-img"><img src="./updown/list/phone.jpg" alt="" srcset=""></div>
          <div class="p">
            <p>
              【搭载HarmonyOS 2】华为 HUAWEI Mate
             40 Pro 4G 全网通 麒麟9000旗舰芯片 8GB+256GB亮黑色手机
            </p>
          </div>
          <div class="span">
            <span class="new"><strong>￥</strong><p>6599.00</p></span>
            <span class="old"><strong>￥</strong><p>7299.00</p></span>
          </div>
          <div class="shoujian">
            <div>已售<span>87%</span></div>
            <div class="father">
              <div class="child"></div>
            </div>
            <div>剩余<strong>29</strong>件</div>
          </div>
          <button title="立即抢购">立即抢购</button>
        </li>
        <li>
          <div class="list-img"><img src="./updown/list/phone.jpg" alt="" srcset=""></div>
          <div class="p">
            <p>
              【搭载HarmonyOS 2】华为 HUAWEI Mate
              40 Pro 4G 全网通 麒麟9000旗舰芯片 8GB+256GB亮黑色手机
            </p>
          </div>
          <div class="span">
            <span class="new"><strong>￥</strong>
              <p>6599.00</p>
            </span>
            <span class="old"><strong>￥</strong>
              <p>7299.00</p>
            </span>
          </div>
          <div class="shoujian">
            <div>已售<span>87%</span></div>
            <div class="father">
              <div class="child"></div>
            </div>
            <div>剩余<strong>29</strong>件</div>
          </div>
          <button title="立即抢购">立即抢购</button>
        </li>
        <li>
          <div class="list-img"><img src="./updown/list/phone.jpg" alt="" srcset=""></div>
          <div class="p">
            <p>
              【搭载HarmonyOS 2】华为 HUAWEI Mate
              40 Pro 4G 全网通 麒麟9000旗舰芯片 8GB+256GB亮黑色手机
            </p>
          </div>
          <div class="span">
            <span class="new"><strong>￥</strong>
              <p>6599.00</p>
            </span>
            <span class="old"><strong>￥</strong>
              <p>7299.00</p>
            </span>
          </div>
          <div class="shoujian">
            <div>已售<span>87%</span></div>
            <div class="father">
              <div class="child"></div>
            </div>
            <div>剩余<strong>29</strong>件</div>
          </div>
          <button title="立即抢购">立即抢购</button>
        </li>
        <li>
          <div class="list-img"><img src="./updown/list/phone.jpg" alt="" srcset=""></div>
          <div class="p">
            <p>
              【搭载HarmonyOS 2】华为 HUAWEI Mate
              40 Pro 4G 全网通 麒麟9000旗舰芯片 8GB+256GB亮黑色手机
            </p>
          </div>
          <div class="span">
            <span class="new"><strong>￥</strong>
              <p>6599.00</p>
            </span>
            <span class="old"><strong>￥</strong>
              <p>7299.00</p>
            </span>
          </div>
          <div class="shoujian">
            <div>已售<span>87%</span></div>
            <div class="father">
              <div class="child"></div>
            </div>
            <div>剩余<strong>29</strong>件</div>
          </div>
          <button title="立即抢购">立即抢购</button>
        </li>
        <li>
          <div class="list-img"><img src="./updown/list/phone.jpg" alt="" srcset=""></div>
          <div class="p">
            <p>
              【搭载HarmonyOS 2】华为 HUAWEI Mate
              40 Pro 4G 全网通 麒麟9000旗舰芯片 8GB+256GB亮黑色手机
            </p>
          </div>
          <div class="span">
            <span class="new"><strong>￥</strong>
              <p>6599.00</p>
            </span>
            <span class="old"><strong>￥</strong>
              <p>7299.00</p>
            </span>
          </div>
          <div class="shoujian">
            <div>已售<span>87%</span></div>
            <div class="father">
              <div class="child"></div>
            </div>
            <div>剩余<strong>29</strong>件</div>
          </div>
          <button title="立即抢购">立即抢购</button>
        </li>
        <li>
          <div class="list-img"><img src="./updown/list/phone.jpg" alt="" srcset=""></div>
          <div class="p">
            <p>
              【搭载HarmonyOS 2】华为 HUAWEI Mate
              40 Pro 4G 全网通 麒麟9000旗舰芯片 8GB+256GB亮黑色手机
            </p>
          </div>
          <div class="span">
            <span class="new"><strong>￥</strong>
              <p>6599.00</p>
            </span>
            <span class="old"><strong>￥</strong>
              <p>7299.00</p>
            </span>
          </div>
          <div class="shoujian">
            <div>已售<span>87%</span></div>
            <div class="father">
              <div class="child"></div>
            </div>
            <div>剩余<strong>29</strong>件</div>
          </div>
          <button title="立即抢购">立即抢购</button>
        </li>
        <li>
          <div class="list-img"><img src="./updown/list/phone.jpg" alt="" srcset=""></div>
          <div class="p">
            <p>
              【搭载HarmonyOS 2】华为 HUAWEI Mate
              40 Pro 4G 全网通 麒麟9000旗舰芯片 8GB+256GB亮黑色手机
            </p>
          </div>
          <div class="span">
            <span class="new"><strong>￥</strong>
              <p>6599.00</p>
            </span>
            <span class="old"><strong>￥</strong>
              <p>7299.00</p>
            </span>
          </div>
          <div class="shoujian">
            <div>已售<span>87%</span></div>
            <div class="father">
              <div class="child"></div>
            </div>
            <div>剩余<strong>29</strong>件</div>
          </div>
          <button title="立即抢购">立即抢购</button>
        </li>
        <li>
          <div class="list-img"><img src="./updown/list/phone.jpg" alt="" srcset=""></div>
          <div class="p">
            <p>
              【搭载HarmonyOS 2】华为 HUAWEI Mate
              40 Pro 4G 全网通 麒麟9000旗舰芯片 8GB+256GB亮黑色手机
            </p>
          </div>
          <div class="span">
            <span class="new"><strong>￥</strong>
              <p>6599.00</p>
            </span>
            <span class="old"><strong>￥</strong>
              <p>7299.00</p>
            </span>
          </div>
          <div class="shoujian">
            <div>已售<span>87%</span></div>
            <div class="father">
              <div class="child"></div>
            </div>
            <div>剩余<strong>29</strong>件</div>
          </div>
          <button title="立即抢购">立即抢购</button>
        </li>
        <li>
          <div class="list-img"><img src="./updown/list/phone.jpg" alt="" srcset=""></div>
          <div class="p">
            <p>
              【搭载HarmonyOS 2】华为 HUAWEI Mate
              40 Pro 4G 全网通 麒麟9000旗舰芯片 8GB+256GB亮黑色手机
            </p>
          </div>
          <div class="span">
            <span class="new"><strong>￥</strong>
              <p>6599.00</p>
            </span>
            <span class="old"><strong>￥</strong>
              <p>7299.00</p>
            </span>
          </div>
          <div class="shoujian">
            <div>已售<span>87%</span></div>
            <div class="father">
              <div class="child"></div>
            </div>
            <div>剩余<strong>29</strong>件</div>
          </div>
          <button title="立即抢购">立即抢购</button>
        </li>
        <li>
          <div class="list-img"><img src="./updown/list/phone.jpg" alt="" srcset=""></div>
          <div class="p">
            <p>
              【搭载HarmonyOS 2】华为 HUAWEI Mate
              40 Pro 4G 全网通 麒麟9000旗舰芯片 8GB+256GB亮黑色手机
            </p>
          </div>
          <div class="span">
            <span class="new"><strong>￥</strong>
              <p>6599.00</p>
            </span>
            <span class="old"><strong>￥</strong>
              <p>7299.00</p>
            </span>
          </div>
          <div class="shoujian">
            <div>已售<span>87%</span></div>
            <div class="father">
              <div class="child"></div>
            </div>
            <div>剩余<strong>29</strong>件</div>
          </div>
          <button title="立即抢购">立即抢购</button>
        </li>
        <li>
          <div class="list-img"><img src="./updown/list/phone.jpg" alt="" srcset=""></div>
          <div class="p">
            <p>
              【搭载HarmonyOS 2】华为 HUAWEI Mate
              40 Pro 4G 全网通 麒麟9000旗舰芯片 8GB+256GB亮黑色手机
            </p>
          </div>
          <div class="span">
            <span class="new"><strong>￥</strong>
              <p>6599.00</p>
            </span>
            <span class="old"><strong>￥</strong>
              <p>7299.00</p>
            </span>
          </div>
          <div class="shoujian">
            <div>已售<span>87%</span></div>
            <div class="father">
              <div class="child"></div>
            </div>
            <div>剩余<strong>29</strong>件</div>
          </div>
          <button title="立即抢购">立即抢购</button>
        </li>
        <li>
          <div class="list-img"><img src="./updown/list/phone.jpg" alt="" srcset=""></div>
          <div class="p">
            <p>
              【搭载HarmonyOS 2】华为 HUAWEI Mate
              40 Pro 4G 全网通 麒麟9000旗舰芯片 8GB+256GB亮黑色手机
            </p>
          </div>
          <div class="span">
            <span class="new"><strong>￥</strong>
              <p>6599.00</p>
            </span>
            <span class="old"><strong>￥</strong>
              <p>7299.00</p>
            </span>
          </div>
          <div class="shoujian">
            <div>已售<span>87%</span></div>
            <div class="father">
              <div class="child"></div>
            </div>
            <div>剩余<strong>29</strong>件</div>
          </div>
          <button title="立即抢购">立即抢购</button>
        </li>
        <li>
          <div class="list-img"><img src="./updown/list/phone.jpg" alt="" srcset=""></div>
          <div class="p">
            <p>
              【搭载HarmonyOS 2】华为 HUAWEI Mate
              40 Pro 4G 全网通 麒麟9000旗舰芯片 8GB+256GB亮黑色手机
            </p>
          </div>
          <div class="span">
            <span class="new"><strong>￥</strong>
              <p>6599.00</p>
            </span>
            <span class="old"><strong>￥</strong>
              <p>7299.00</p>
            </span>
          </div>
          <div class="shoujian">
            <div>已售<span>87%</span></div>
            <div class="father">
              <div class="child"></div>
            </div>
            <div>剩余<strong>29</strong>件</div>
          </div>
          <button title="立即抢购">立即抢购</button>
        </li>
        <li>
          <div class="list-img"><img src="./updown/list/phone.jpg" alt="" srcset=""></div>
          <div class="p">
            <p>
              【搭载HarmonyOS 2】华为 HUAWEI Mate
              40 Pro 4G 全网通 麒麟9000旗舰芯片 8GB+256GB亮黑色手机
            </p>
          </div>
          <div class="span">
            <span class="new"><strong>￥</strong>
              <p>6599.00</p>
            </span>
            <span class="old"><strong>￥</strong>
              <p>7299.00</p>
            </span>
          </div>
          <div class="shoujian">
            <div>已售<span>87%</span></div>
            <div class="father">
              <div class="child"></div>
            </div>
            <div>剩余<strong>29</strong>件</div>
          </div>
         <button title="立即抢购">立即抢购</button>
        </li>
        <li>
          <div class="list-img"><img src="./updown/list/phone.jpg" alt="" srcset=""></div>
          <div class="p">
            <p>
              【搭载HarmonyOS 2】华为 HUAWEI Mate
              40 Pro 4G 全网通 麒麟9000旗舰芯片 8GB+256GB亮黑色手机
            </p>
          </div>
          <div class="span">
            <span class="new"><strong>￥</strong>
              <p>6599.00</p>
            </span>
            <span class="old"><strong>￥</strong>
              <p>7299.00</p>
            </span>
          </div>
          <div class="shoujian">
            <div>已售<span>87%</span></div>
            <div class="father">
              <div class="child"></div>
            </div>
            <div>剩余<strong>29</strong>件</div>
          </div>
          <button title="立即抢购">立即抢购</button>
        </li>
        <li>
          <div class="list-img"><img src="./updown/list/phone.jpg" alt="" srcset=""></div>
          <div class="p">
            <p>
              【搭载HarmonyOS 2】华为 HUAWEI Mate
              40 Pro 4G 全网通 麒麟9000旗舰芯片 8GB+256GB亮黑色手机
            </p>
          </div>
          <div class="span">
            <span class="new"><strong>￥</strong>
              <p>6599.00</p>
            </span>
            <span class="old"><strong>￥</strong>
              <p>7299.00</p>
            </span>
          </div>
          <div class="shoujian">
            <div>已售<span>87%</span></div>
            <div class="father">
              <div class="child"></div>
            </div>
            <div>剩余<strong>29</strong>件</div>
          </div>
          <button title="立即抢购">立即抢购</button>
        </li>
      </ul>
    </div>
    <!-- 手机模块 end -->


    <!-- 底部模块 start -->
    <footer class="footer">
        <div class="w">
          <div class="mod_service">
            <ul>
              <li>
                <h5><img src="./images/正品保障2.png" alt="" srcset=""></h5>
                <div class="service_txt">
                  <h3>正品保障</h3>
                  <p>正品保障，提供发票</p>
                </div>
              </li>
              <li>
                <h5><img src="./images/快递车.png" alt="" srcset=""></h5>
                <div class="service_txt">
                  <h3>极速物流</h3>
                  <p>急速物流，急速送达</p>
                </div>
              </li>
              <li>
                <h5><img src="./images/无忧售后.png" alt="" srcset=""></h5>
                <div class="service_txt">
                  <h3>无忧售后</h3>
                  <p>7天无理由退换货</p>
                </div>
              </li>
              <li>
                <h5><img src="./images/特色服务.png" alt="" srcset=""></h5>
                <div class="service_txt">
                  <h3>特色服务</h3>
                  <p>私人定制家电套餐</p>
                </div>
              </li>
              <li>
                <h5><img src="./images/帮助.png" alt="" srcset=""></h5>
                <div class="service_txt">
                  <h3>帮助指南</h3>
                  <p>您的购物指南</p>
                </div>
              </li>
            </ul>
          </div>
          <div class="mod_help">
            <ul>
              <li>
                <dl class="dl">
                  <dt>购物指南</dt>
                  <dd><a href="javascript:;">购物流程</a> </dd>
                  <dd><a href="javascript:;">会员介绍</a> </dd>
                  <dd><a href="javascript:;">生活旅行/团购</a> </dd>
                  <dd><a href="javascript:;">常见问题</a> </dd>
                  <dd><a href="javascript:;">大家电</a> </dd>
                  <dd><a href="javascript:;">联系客服</a> </dd>
                </dl>
              </li>
              <li>
                <dl class="dl">
                  <dt>配送方式</dt>
                  <dd><a href="javascript:;">上门自提</a> </dd>
                  <dd><a href="javascript:;">211限时达</a> </dd>
                  <dd><a href="javascript:;">配送服务查询</a> </dd>
                  <dd><a href="javascript:;">配送费收取标准</a> </dd>
                  <dd><a href="javascript:;">海外配送</a> </dd>
                </dl>
              </li>
              <li>
                <dl class="dl">
                  <dt>支付方式</dt>
                  <dd><a href="javascript:;">货到付款</a> </dd>
                  <dd><a href="javascript:;">在线支付</a> </dd>
                  <dd><a href="javascript:;">分期付款</a> </dd>
                  <dd><a href="javascript:;">邮局汇款</a> </dd>
                  <dd><a href="javascript:;">公司转账</a> </dd>
                </dl>
              </li>
              <li>
                <dl class="dl">
                  <dt>售后服务</dt>
                  <dd><a href="javascript:;">售后政策</a> </dd>
                  <dd><a href="javascript:;">价格保护</a> </dd>
                  <dd><a href="javascript:;">退款说明</a> </dd>
                  <dd><a href="javascript:;">返修/退换货</a> </dd>
                  <dd><a href="javascript:;">取消订单</a> </dd>
                </dl>
              </li>
              <li>
                <dl class="dl">
                  <dt>特色服务</dt>
                  <dd><a href="javascript:;">夺宝岛</a> </dd>
                  <dd><a href="javascript:;">DIY装机</a> </dd>
                  <dd><a href="javascript:;">延保服务</a> </dd>
                  <dd><a href="javascript:;">品优购E卡</a> </dd>
                  <dd><a href="javascript:;">品优购通信</a> </dd>
                </dl>
              </li>
              <li>
                <dl class="dl">
                  <dt>帮助中心</dt>
                  <dd class="dd"></dd>
                  <dd>品优购客户端</dd>
                </dl>
              </li>
            </ul>
          </div>
          <div class="mod_explaim">
            <div class="explaim_more">
              <ul>
                <li>关于我们</li>
                <li></li>
                <li>联系我们</li>
                <li></li>
                <li>联系客服</li>
                <li></li>
                <li>商家入驻</li>
                <li></li>
                <li>营销中心</li>
                <li></li>
                <li>手机品优购</li>
                <li></li>
                <li>友情链接</li>
                <li></li>
                <li>销售联盟</li>
                <li></li>
                <li>品优购社区</li>
                <li></li>
                <li>品优购公益</li>
                <li></li>
                <li>English Site</li>
                <li></li>
                <li>Contact U</li>
              </ul>
            </div>
            <div class="explaim_address">
              <p>地址：北京市昌平区建材城西路金燕龙办公
                楼一层 邮编：100096 电话：400-618-4
                000 传真：010-82935100 邮箱: zh
                anghj+itcast.cn
              </p>
              <p>
                京ICP备08001421号京公网安备110108007702
              </p>
            </div>
      
          </div>
        </div>
    </footer>
    <!-- 底部模块 end -->

</body>
</html>